<template>
	<view class="nodePanel" :style="{height: `${height}rpx`}">
		<scroll-view class="nodePanelCell"  scroll-y :style="{height: `${height}rpx`,width:`${chiledWidth}rpx`}">
			<view v-for="(item,index) in _optionsData" :key="index">
				<cascader-node ref="lastNode" :idKey="idKey" @click="nodeClickNowChild(item)" :nodeData="item"></cascader-node>
			</view>
		</scroll-view>
		<cascader-panel :idKey="idKey"  :labelKey="labelKey" ref="cNode"  :width="width" :height="height" :chiledWidth="chiledWidth" class="nodePanel" :optionsData="nowChild" v-if="nowChild.length>0"></cascader-panel>
	</view>
</template>

<script>
	import cascaderPanel from "./cascader-panel.vue"
	import cascaderNode from "./cascader-node.vue"
	import {findeParent} from "./util.js"
	export default {
			name:"cascaderPanel",
			components:{cascaderPanel,cascaderNode},
			props:{
				optionsData:{
					type:Array,
					default:()=>[]
				},
				width:{
					type:Number,
					default:750
				},
				height:{
					type:Number,
					default:500
				},
				chiledWidth:{
					type:Number,
					default:250
				},
				//id的映射字段				idKey:{					type:String,					default:"value"				},
				labelKey:{
					type:String,
					default:"label"
				}
			},
			inject:['CASCADER_CHECKED','CASCADER_NowCheckValue'],
			data() {
				return {
					checkedValue:[],
					nowChild:[]
				}
			},
			computed:{
				_optionsData:function(){
					return this.optionsData;
				},
				_checkedValue(){
					return this.CASCADER_CHECKED();
				},
				_nowCheckValue(){
					return this.CASCADER_NowCheckValue();
				},
			},
			watch:{
				_nowCheckValue(newval,oldval){
					
				}
			},
			created() {
				
			},
			mounted() {
	
			},
			methods: {
				
				isNextNode(node){
					return node?.children??false
				},
				defaultChildrenParent(value){
					let t = this;
					let nowValue = value||this._nowCheckValue
					if(nowValue?.length>0&&this.optionsData?.length>0){
						let firstvalue = nowValue[0];
						let ar = this.optionsData.filter(el=>el[this.idKey]==firstvalue)
						if(ar?.length>0&&ar[0]?.children){
							this.nodeClickNowChild(ar[0])
							let p = [...nowValue]
							p.shift()
							
							setTimeout(function() {
								t.$refs.cNode.defaultChildrenParent(p)
							}, 100);
						}
					}
				},
				nodeClickNowChild(item){
					this.nowChild = [];
					if(this.isNextNode(item)){
						let pareant = findeParent(this.$parent);
						this.$nextTick(()=>{
							this.nowChild = item.children
							pareant.setParenValue(item[this.idKey])
						})
					}
				}
			}
		}
	</script>
</script>

<style>
	
	.nodePanel{
		display: flex;
		justify-content: flex-start;
		flex-flow: row;
	}
	.nodePanelCell{
		display: flex;
		flex-flow: column;
	}
</style>